SLEEPY SHROOM ☆

Note: This page is a WIP!!

Woo! More messing around with my cool new ssg! Having a cool art gallery was the main reason I wanted to get an ssg (and one of the main reasons I even decided to come back to this site in the first place), so obv this was going to be one of the first things I played around with! You can check out my gallery here (it is very much a wip and isn't styled yet as of writing this tho)!

Obligatory disclaimer!! Not a tutorial even tho it will be kind of written like one-- I don't know what I'm doing so a lot of the things I do will probably be really scuffed or badly done lol.

This tutorial by Geoledgy is the one I used. I also referenced stupied's blog post for figuring out the obsidian stuff!

Adding the images

I started by adding 2 images, the two new ref sheets I drew for my ocs, to test with. I set up a new folder structure and added them in:

src/
|-- art/
|   |-- 2026/
|   |   |-- ather ref sheet.md
|   |   `-- cast ref sheet.md
|   |-- img/
|   |   |-- 2026/
|   |   |   |-- ather ref sheet.png
|   |   |   `-- cast ref sheet.png
|   |-- art.json

Tbh I'm not entirely sure if I like this structure but it will do for now.

Basically, I have two main subfolder in my art folder: one for markdown files and the other one for the actual images. The md files will include properties like tags or date and will be what is displayed when I click on an art piece from the gallery (like this!).

Each of my md files is set up something like this:

---
title: ather ref sheet
ext: png
date: 2026-06-06
permalink: /art/2026/ather ref sheet.html
tags:
  - ref
  - ather
---
Description of the image goes here

I make sure that the title I give it is the same as the title of the image file. This is so that I can automatically add the image when rendering the md file by combining the title property + the ext property. I also make sure the permalink has the same name as the title, just to keep everything clean. I inputted the date manually as the date I finished the artwork.

The contents of the md file will just be whatever I want to say about the artwork. Maybe a short description of it or maybe a whole aa article about how I made it. Keeping them in md files gives me the freedom to put as much or as little as I want :D

The art.json file tells it to use the art-page layout and add the artwork tag for all pages within the art/ folder.

{
  "layout": "art-page",
  "tags": "artwork"
}

Cool! The test images are set up!

adding the art page template

Next, we need some templates to actually render out our md files. I started by making the art page template, which is the full sized page with description that shows up when you click a piece from the gallery.

I created art-page.njk in my layouts folder. Here is what I started with in the <body>:

<div class="bg"></div>
<div class="main-container">
    <h1>{{ title }}</h1>

    {{page.date}}

    {% set tags = tags %}
    {% for tag in tags -%}
        <span class="tags">{{tag}}</span>
    {%- endfor %}

    <a href="/art/tagged/2026.html">go back</a>
    <img src="/art/img/{{ page.date.getFullYear() }}/{{ title }}.{{ ext }}" alt="">

    {{ content | safe }}
</div>

The for loop goes through every tag within my md page and adds it in within a span element.

Since all my images are stored in /art/img/YEAR/NAME.EXT, I could add it automatically by grabbing those properties from my md page.

But oh no! The date is showing up REALLY LONG!! If you put page.date, 11ty automatically generates a really long string of text that looks a little like this:

Wed Jun 24 2026 08:00:00 YOUR TIMEZONE (your timezone)

Obv we don't want this giant string of text showing up everywhere, so we gonna shorten it.

We can do this through filters!!

In my config file (mine is called eleventy.config.js), I added this code inside export default function (eleventyConfig) { and before the return function:

eleventyConfig.addFilter("postDate", (dateObj) => {
    if (!dateObj) return ""; 
    return dateObj.toLocaleString(undefined, {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  });

(code taken from karlynelson.com but with this if (!dateObj) return ""; added so that it doesn't crash my build if dateObj doesn't exist-- ran into some problems with this later)

This creates a filter called postDate which we can use by replacing {{page.date}} with {{page.date | postDate}}

Great, now the date looks normal!

Another issue! We don't want the "artwork" tag to show up since they're all arworks lol. To fix this, I created another filter:

eleventyConfig.addFilter('exclude', (collection, stringToFilter) => {
    if (!stringToFilter) {
      return collection;
    }
    return (collection ?? []).filter((item) => item !== stringToFilter);
  });

(tbh I'm not sure where I got this code from)

And I added {% set tags = tags | exclude('artwork') %} above the for loop.

Here is what my page looks like with some preliminary css:

art page

GREAT! Now time to make the gallery!

making the gallery

I started by making a template called art-gallery.njk with this inside <body>:

<div class="main-container">
    <div class="header">
        <h1>Art Gallery</h1>
        <p style="color:white">wip!! Haven't styled this page much yet BUT IT WORKS!!! Also still need to import SO MUCH art lmao</p>
        <p style="color:white">Anyways, images art sorted by newest to oldest. Click on the artwork for bigger version and some of my ramblings about it :D</p>
    </div>
    <div class="grid">
        <div class="gallery-container">
            {{ content | safe }}
        </div>
        <div class="nav-bar">
            {% include '_partials/art-gallery-nav.njk' %}
        </div>
    </div>
</div>

This will basically be the "frame" for my art gallery!

The actual gallery with the flexbox and art cards inside will be stored in separate files (will be using pagination to create a new page for each tag!). Those files will use this template and display that box inside of the .gallery-container div.

The nav-bar will include the content from art-galler-nav.njk, which I just have as a list of links linking to the page for each tag that I manually put in.

Ok, time to make the tag pages! For this, I used 11ty's pagination. I created a new file in /src called art-gallery-pagination.njk and added this:

---
pagination:
    data: collections
    size: 1
    alias: tag
    addAllPagesToCollections: true
    reverse: true
    filter:
        - 
layout: art-gallery.njk
permalink: "/art/tagged/{{ tag }}.html"
eleventyComputed:
    title: Art tagged with "{{ tag }}"
---

<body>
    <h2>filter: {{tag}}</h2>    
    <div class="gallery">
        
        {%- for post in collections[tag] | reverse -%}

        <a href="{{ post.url }}">
            <div class="block">
                <img src="/art/img/2026/{{ post.data.title }}.{{ post.data.ext }}" loading="lazy">
                <div>
                    <h2>{{ post.data.title }}</h2>
                    <p>{{ post.date | postDate }}</p>
                    
                    <p>
                        {% set tags = post.data.tags | exclude("artwork") %}
                            {% for tag in tags -%}
                                <span class="tags">{{ tag }}</span>
                            {%- endfor %}
                    </p>
                </div>
            </div>
        </a>
        {% endfor %}
        
    </div>
</body>

Making an art gallery (and using obsidian)!

Adding the images

adding the art page template

making the gallery